<template>
  <div>
    <el-dialog v-loading="loading" :title="titleText" :visible.sync="previewShow" :width="width" :close-on-click-modal="false" @close="cancel">
      <div class="preview-wrapper">
        <el-carousel v-if="Array.isArray(file)" height="100%">
          <el-carousel-item v-for="(item, index) in file" :key="index">
            <img v-if="determineFileFormat(item.name) === 'image'" :src="item.url" alt width="100%" />
            <iframe v-if="determineFileFormat(item.name) === 'pdf'" :src="item.url" frameborder="0" width="100%" height="100%"></iframe>
            <video v-if="determineFileFormat(item.name) === 'video'" :src="item.url" controls width="100%"></video>
            <iframe v-if="determineFileFormat(item.name) === 'document'" :src="'https://view.officeapps.live.com/op/view.aspx?src=' + item.url" controls muted width="100%"></iframe>
          </el-carousel-item>
        </el-carousel>
        <template v-else>
          <img v-if="determineFileFormat(file.name) === 'image'" :src="file.url" alt width="100%" />
          <iframe v-if="determineFileFormat(file.name) === 'pdf'" :src="file.url" frameborder="0" width="100%" height="100%"></iframe>
          <video v-if="determineFileFormat(file.name) === 'video'" :src="file.url" controls width="100%"></video>
          <iframe v-if="determineFileFormat(file.name) === 'document'" :src="'https://view.officeapps.live.com/op/view.aspx?src=' + file.url" controls muted width="100%"></iframe>
        </template>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="cancel()">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    value: Boolean,
    titleText: {
      type: String,
      default: '文件预览'
    },
    file: {
      type: [Object, Array],
      default: () => []
    },
    width: {
      type: String,
      default: '80%'
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      previewShow: false
    };
  },
  watch: {
    value(v) {
      this.previewShow = v;
      if (!v) {
        this.reset();
      }
    }
  },
  created() {
    this.previewShow = this.value;
  },
  methods: {
    reset() {},
    determineFileFormat(filename) {
      const fileExtension = filename
        .split('.')
        .pop()
        .toLowerCase();

      const imageFormats = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];
      const videoFormats = ['mp4', 'mov', 'avi', 'mkv', 'flv'];
      const documentFormats = ['doc', 'docx', 'txt', 'rtf', 'odt', 'odp', 'xls', 'xlsx', 'csv'];
      const pdfFormats = ['pdf'];

      if (imageFormats.includes(fileExtension)) {
        return 'image';
      } else if (videoFormats.includes(fileExtension)) {
        return 'video';
      } else if (documentFormats.includes(fileExtension)) {
        return 'document';
      } else if (pdfFormats.includes(fileExtension)) {
        return 'pdf';
      } else {
        return 'other';
      }
    },
    close() {
      this.$emit('input', false);
    },
    cancel() {
      this.$emit('input', false);
    }
  }
};
</script>
<style lang="scss" scoped>
.preview-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  img,
  video,
  iframe {
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}
::v-deep .el-dialog__body {
  overflow-y: hidden !important;
  height: 70vh !important;
}
.carousel-container {
  width: 100%;
  height: 100%;
}

.el-carousel {
  width: 100%;
  height: 100%;
}

.el-carousel__container {
  width: 100%;
  height: 100%;
}

.el-carousel__item {
  width: 100%;
  height: 100%;
  display: flex;
}
</style>
